<template>
    <div class="w-full h-full -100 dark:-900 p-3">
        <div class="w-full h-full flex p-4 bg-white dark:bg-black text-gery-700 dark:text-gery-300">
            <div class="flex flex-col" id="left" style="width: 70px; min-width: 70px">
                <div v-for="(item, index) in state.componentsList" :key="index" class="rounded bg-zinc-100 dark:bg-zinc-700 text-gery-500 p-1 mb-1 mt-1 text-center cursor-pointer border-solid border-gery-300 border">{{ item.name }}</div>
            </div>
            <div class="flex flex-col w-full h-full bg-gery-200 dark:bg-gery-800 text-gray-200 ml-4 rounded overflow-x-auto">
                <div class="bg-white dark:bg-black p-2 flex justify-between" style="border: 2px solid rgba(0, 0, 0, 0.05); border-bottom: 0">
                    <div class="text-gery-500" style="width: 100px"></div>
                    <div class="text-gery-800 flex gap-1">
                        <sysIcon class="link rounded" :style="state.setConfig.isMob ? 'background:#f0f0f0' : ''" type="system-shouji" @click=";(state.setConfig.isMob = true), (state.setConfig.column = '单列')"></sysIcon>
                        <sysIcon class="link rounded" :style="!state.setConfig.isMob ? 'background:#f0f0f0' : ''" type="system-bijibendiannao_o" @click=";(state.setConfig.isMob = false), (state.setConfig.column = '双列')"></sysIcon>
                    </div>
                    <a-radio-group style="width: 100px" v-if="!state.setConfig.isMob" size="small" v-model:value="state.setConfig.column" button-style="solid">
                        <a-radio-button value="单列">单列</a-radio-button>
                        <a-radio-button value="双列">双列</a-radio-button>
                    </a-radio-group>
                    <div v-else style="width: 100px"></div>
                </div>
                <div class="p-4 bg-gery-200 dark:bg-gery-800 h-full flex justify-center overflow-y-auto">
                    <div id="formBuilder" @click="activeItem" :class="[state.setConfig.isMob ? 'isMb' : 'isPc', state.setConfig.column == '单列' ? 'isPcOne' : 'isPcTwo']"></div>
                </div>
            </div>
            <div class="flex flex-col h-full ml-4" style="width: 238px; min-width: 238px">
                <div class="flex flex-col overflow-y-auto h-full" v-if="state.active !== null">
                    <div class="flex h-full flex-col gap-2">
                        <!-- <div>{{ state.active }},{{ state.activeIndex }}</div> -->
                        <d-input v-model:value="state.jsonData[state.activeIndex].title" placeholder="标题"></d-input>
                        <d-input v-model:value="state.jsonData[state.activeIndex].key" placeholder="参数名"></d-input>
                        <a-radio-group v-model:value="state.jsonData[state.activeIndex].status" button-style="solid">
                            <a-radio-button value="普通">普通</a-radio-button>
                            <a-radio-button value="禁用">禁用</a-radio-button>
                            <a-radio-button value="只读">只读</a-radio-button>
                            <a-radio-button value="隐藏">隐藏</a-radio-button>
                        </a-radio-group>
                        <a-switch style="width: 60px" v-model:checked="state.jsonData[state.activeIndex].multiple" checked-children="多选" un-checked-children="单选" />
                        <a-switch style="width: 60px" v-model:checked="state.jsonData[state.activeIndex].required" checked-children="必填" un-checked-children="选填" />
                        <!-- {{ state.jsonData }} -->
                    </div>
                    <div class="flex gap-2">
                        <a-button class="w-full" @click="viewCode">查看JSON数据</a-button>
                        <a-button class="w-full" type="primary">复制代码</a-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
let state = reactive({
    aaaaa: '6541461616',
    active: null,
    activeIndex: null,
    store: useStore(),
    setConfig: {
        multiple: true,
        required: true,
        status: '普通',

        isMob: true,
        column: '单列',
    },
    componentsList: [
        {
            type: 'a',
            name: '单行文本',
        },
        {
            type: 'b',
            name: '多行文本',
        },
        {
            type: 'c',
            name: '数值',
        },
        {
            type: 'd',
            name: '单选',
        },
        {
            type: 'e',
            name: '复选',
        },
        {
            type: 'f',
            name: '下拉单选',
        },
        {
            type: 'g',
            name: '下拉复选',
        },
        {
            type: 'h',
            name: '级联选择',
        },
        {
            type: 'i',
            name: '树选择',
        },
        {
            type: 'j',
            name: '日期',
        },
        {
            type: 'k',
            name: '日期区间',
        },
        {
            type: 'l',
            name: '图片上传',
        },
        {
            type: 'm',
            name: '附件上传',
        },
        {
            type: 'n',
            name: '通讯录',
        },
    ],
    jsonData: [],
    code: '请描述组件信息',
})

function activeItem(item) {
    state.active = item.target.getAttribute('index')
    getActiveIndex(state.active) //获取jsonData真实索引
}

//根据dom索引值获取jsonData索引
function getActiveIndex(i) {
    state.jsonData.forEach((element, index) => {
        if (element.index == i) {
            state.activeIndex = index
        }
    })
    return state.activeIndex
}
//删除DOM&删除jsonData
window.delet = function (event) {
    let origEl = event.target.parentNode
    let index = origEl.getAttribute('index')
    var origElP = origEl.parentNode
    origElP.removeChild(origEl)
    setTimeout(() => {
        state.jsonData.splice(state.activeIndex, 1)
    }, 0)
}

const viewCode = () => {
    message.info(JSON.stringify(state.jsonData))
}

onMounted(() => {
    const getById = document.getElementById('left')
    new Sortable(getById, {
        group: {
            name: 'STR_FORMDESIGN',
            pull: 'clone',
            put: false,
        },
        sort: false,
        animation: 150,
        onChoose: function (evt) {}, // 元素被选中
        onAdd: function (evt) {}, // 添加到这里
        onEnd: function (evt) {}, // 拖动结束
        onRemove: function () {},
        onClone: function (evt) {},
    })

    function getEventMaxIndex(childElements) {
        let maxIndex = -1
        for (let i = 0; i < childElements.length; i++) {
            let element = childElements[i]
            let index = parseInt(element.getAttribute('index'))
            if (index > maxIndex) {
                maxIndex = index
            }
        }
        return maxIndex == -1 ? 0 : maxIndex + 1
    }

    const formBuilder = document.getElementById('formBuilder')
    new Sortable(formBuilder, {
        group: {
            name: 'STR_FORMDESIGN',
        },
        ghostClass: 'shadow',
        animation: 150,
        onChoose: function (evt) {},
        onAdd: function (evt) {
            let origEl = evt.item
            const parent = document.querySelector('#formBuilder')
            const childDivs = parent.querySelectorAll('div')
            state.active = getEventMaxIndex(childDivs) //获取dom最大索引值
            origEl.setAttribute('index', state.active)
            state.jsonData.push({
                title: origEl.innerHTML,
                key: undefined,
                type: origEl.getAttribute('type'),
                index: state.active,
                required: true,
                multiple: false,
                status: '普通',
            })

            getActiveIndex(state.active) //获取jsonData真实索引
        },
        onEnd: function (evt) {
            let origE2 = evt.item
            state.active = origE2.getAttribute('index')
            getActiveIndex(state.active) //获取jsonData真实索引
        },
    })
})

watch(
    () => state.active,
    (newVal, oldVal) => {
        setTimeout(() => {
            const parent = document.querySelector('#formBuilder')
            parent.querySelectorAll('div').forEach(childDiv => {
                const index = childDiv.getAttribute('index')
                if (state.active == index) {
                    if (!childDiv.querySelector('a')) {
                        childDiv.insertAdjacentHTML('beforeend', `<a onclick='delet(event)'>删除</a>`)
                        childDiv.style.border = '1px dashed ' + state.store.config.primaryColor
                    }
                } else {
                    childDiv.querySelectorAll('a').forEach(link => link.remove())
                    childDiv.style.border = '1px dashed #d9d9d9'
                }
            })
        }, 100)
    }
)

watch(
    () => state.jsonData,
    (newVal, oldVal) => {
        const parent = document.querySelector('#formBuilder')
        parent.querySelectorAll('div').forEach(childDiv => {
            const index = childDiv.getAttribute('index')
            if (index == state.active) {
                childDiv.innerHTML = `${newVal[state.activeIndex].required ? "<span style='color:red'>*</span>" : ''} ${newVal[state.activeIndex].title}`
                childDiv.setAttribute('type', newVal[state.activeIndex].type)
                childDiv.setAttribute('index', state.active)
                childDiv.insertAdjacentHTML('beforeend', `<input placeholder="请输入" type="text" index="${state.active}" disabled class="mt-2 ant-input css-dev-only-do-not-override-1ts4xih css-dev-only-do-not-override-1l8hio w-full"></input>`)
            }
        })
    },
    {
        deep: true,
    }
)

defineExpose({})
const {} = toRefs(state)
</script>
<style>
.isPc {
    @apply p-4 w-full h-full gap-2 bg-white dark:bg-black;
}
.isPcOne > div {
    width: 400px;
}
.isPcTwo {
    @apply flex flex-wrap content-start;
}
.isPcTwo > div {
    width: 48%;
}
.isMb {
    @apply p-4 w-full rounded h-full gap-2 bg-white dark:bg-black;
    width: 375px;
}
.isMb > div {
    width: 100% !important;
}
#formBuilder > div {
    position: relative;
}
#formBuilder > div a {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--ant-primary-color);
    padding: 2px 5px;
    color: #ffffff;
}
#formBuilder > div {
    text-align: left;
    padding: 10px;
    margin-bottom: 10px;
}
#formBuilder > div input {
    cursor: pointer;
}

.shadow {
    filter: blur(1px);
    border: 1px dashed var(--ant-primary-color) !important;
}

#left > div {
    border: 1px solid #dedede !important;
}
#left > div a {
    display: none;
}
</style>
